<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <title>图书管理系统</title>
    <%--引入vue的js--%>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <%--引入element的js--%>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="/js/axios.min.js"></script>
    <%--引入elementui的样式--%>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>

    </style>
</head>
<body>
<div id="app">
    <el-button type="primary" @click="addAlls">添加</el-button>
    <el-table
            :data="roles"
            border
            style="width: 100%">
        <el-table-column
                fixed
                prop="roleid"
                label="编号"
        >
        </el-table-column>
        <el-table-column
                fixed
                prop="rolename"
                label="角色名"
        >
        </el-table-column>
        <el-table-column
                fixed
                prop="remark"
                label="描述"
        >
        </el-table-column>
        <el-table-column
                fixed
                prop="status"
                label="状态"
        >
            <template slot-scope="scope">
                <el-switch
                        v-model="scope.row.status"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        :active-value="1+''"
                        :inactive-value="0+''"
                        @change="changestatus(scope.row)"
                >
                </el-switch>
            </template>
        </el-table-column>

        <el-table-column
                fixed="right"
                label="操作"

        >
            <template slot-scope="scope">
                <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
                <el-button type="danger" v-if="scope.row.roleid!=1" size="small" @click="delete1(scope.row)">删除</el-button>
                <el-button type="danger" size="small" @click="editQx(scope.row.roleid)">修改权限</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <%--修改权限弹出框--%>
    <el-dialog
            title="修改权限"
            :visible.sync="dialogVisible"
            width="30%"
    >
        <%--
           el-tree:树形组件
              data: 树形数据
              show-checkbox: 显示复选框
              node-key:每个树形的标志
              default-expanded-keys:默认展开的key
              default-checked-keys: 默认选中的
              props: 默认展示的树形
                     //ref="tree"
<%--        &ndash;%&gt;--%>
        <el-tree
                :data="data"
                show-checkbox
                ref="tree"
                node-key="id"
                :props="defaultProps">
        </el-tree>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="confirmUpdate()">确 定</el-button>
          </span>
    </el-dialog>
    </el-dialog>
    <el-dialog title="编辑角色信息 " :visible.sync="dialogFormVisible2" width="500px">
        <el-form :model="editForm" :rules="addRule1" ref="aaa">
            <el-form-item label="角色名" label-width="70" prop="rolename">
                <el-input v-model="editForm.rolename" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="描述" label-width="60" prop="remark">
                <el-input v-model.number="editForm.remark" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="状态" label-width="60" prop="status">
                <el-input v-model="editForm.status" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible2 = false">取 消</el-button>
            <el-button type="primary" @click="editrole">确 定</el-button>
        </div>
    </el-dialog>
    </el-dialog>
    <el-dialog title="增添角色信息 " :visible.sync="dialogFormVisible" width="500px">
        <el-form :model="addForm1" :rules="addRule" ref="aaa">
            <el-form-item label="角色名" label-width="70" prop="rolename">
                <el-input v-model="addForm1.rolename" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="描述" label-width="60" prop="remark">
                <el-input v-model.number="addForm1.remark" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="状态" label-width="60" prop="status">
                <el-input v-model="addForm1.status" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="editroles">确 定</el-button>
        </div>
    </el-dialog>
</div>
</body>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            //表格数据
            roles: [],
            current: 1,
            pageSize: 5,
            total: 0,
            //控制修改权限的弹出框
            dialogVisible: false,
            //树形数据
            data: [],
            defaultProps: {
                children: 'children',
                label: 'menuName'
            },
            //被选中的树形菜单
            checkKeys: [],
            //修改角色的id
            roleId: 0,
            // 编辑表单名
            editForm: {},
            addForm1: {},
            /*控制添加页面显示和隐藏*/
            dialogFormVisible: false,
            /*控制编辑页面显示和隐藏*/
            dialogFormVisible2: false,
            addRule: {
                rolename: [
                    {required: true, message: '请输入名称', trigger: 'blur'}
                ],
                remark: [
                    {required: true, message: '不能为空'},
                ],
                status: [
                    {required: true, message: '不能为空', trigger: 'blur'}
                ],
            },
            addRule1: {
                rolename: [
                    {required: true, message: '请输入名称', trigger: 'blur'}
                ],
                remark: [
                    {required: true, message: '不能为空'},
                ],
                status: [
                    {required: true, message: '不能为空', trigger: 'blur'}
                ],
            }
        },
        created() {
            this.loadRoleTable();
        },
        methods: {
            // 确认信息
            editroles(){
                this.$refs.aaa.validate((valid) => {
                    if (valid){
                        axios.post("/role/insert",this.addForm1).then(res=>{
                            this.dialogFormVisible=false
                            this.$message.success("添加成功")
                            this.loadRoleTable()
                        })
                    }

                })
            },
        // 添加信息
        addAlls() {
            this.dialogFormVisible = true
        },
            // 删除信息
            delete1(row) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.post("/role/delete/" + row.roleid).then(res => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.loadRoleTable()
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            // 编辑员工信息
            editrole() {
                this.$refs.aaa.validate((valid) => {
                    if (valid) {
                        axios.post("/role/update", this.editForm).then(res => {
                            this.$refs.aaa.resetFields();
                            this.dialogFormVisible2 = false;
                            this.$message.success("修改成功")
                            this.loadRoleTable()
                        })
                    }
                })
            },
            // 点击编辑
            handleEdit(row) {
                this.dialogFormVisible2 = true;
                this.editForm =JSON.parse(JSON.stringify(row));
            },
            // 点击删除

            //确认修改权限
            confirmUpdate() {
                let arr1 = this.$refs.tree.getCheckedKeys();//获取全选的树
                let arr2 = this.$refs.tree.getHalfCheckedKeys();//获取全选的树
                let checkArr = arr1.concat(arr2);
                axios.get("/menu/confirmUpdate?roleId=" + this.roleId + "&menuIds=" + checkArr).then(result => {
                    this.$message.success("修改权限成功");
                    this.dialogVisible = false;
                });
            },
            //修改权限
            editQx(roleid) {
                this.roleId = roleid;
                this.dialogVisible = true;
                console.log("修改权限执行了")
                this.data = []
                axios.get("/menu/getByRoleId?roleId=" + roleid).then(result => {
                    console.log(result)
                    for (let i = 0; i < result.data.data.menus.length; i++) {
                        let menu = {
                            children: [],
                            id: undefined,
                            menuName: undefined,
                            menuParent: undefined,
                            menuUrl: undefined,

                        }
                        menu.id = result.data.data.menus[i].menuId
                        menu.menuName = result.data.data.menus[i].menuName
                        menu.menuUrl = result.data.data.menus[i].menuUrl
                        menu.menuParent = result.data.data.menus[i].menuParent
                        for (let j = 0; j < result.data.data.menus[i].children.length; j++) {
                            let menu1 = {
                                children: [],
                                id: undefined,
                                menuName: undefined,
                                menuParent: undefined,
                                menuUrl: undefined,
                            }
                            menu1.id = result.data.data.menus[i].children[j].menuId
                            menu1.menuName = result.data.data.menus[i].children[j].menuName
                            menu1.menuUrl = result.data.data.menus[i].children[j].menuUrl
                            menu1.menuParent = result.data.data.menus[i].children[j].menuParent
                            menu.children.push(menu1)
                        }
                        this.data.push(menu)
                    }
                    this.checkKeys = result.data.data.menuIds;
                    setTimeout(() => {
                        this.checkKeys.forEach(value => {
                            this.$refs.tree.setChecked(value, true, false)
                        })
                    }, 100)
                })
            },
            changestatus(row) {
                axios.get("/role/updateStatus?id=" + row.roleid + "&status=" + row.status).then(result => {
                    if (result.data.code === 200) {
                        this.$message.success(result.data.msg);
                    } else {
                        this.$message.error(result.data.msg);
                    }
                })
            },
            loadRoleTable() {
                axios.get("/role/list/" + this.current + "/" + this.pageSize).then(result => {
                    this.roles = result.data.data.list;
                    this.total = result.data.data.total;
                })
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.loadRoleTable();
            },
            handleCurrentChange(val) {
                this.current = val;
                this.loadRoleTable();
            },
        }
    })


</script>
</body>
</html>
